<script setup lang="ts">
// import { computed } from 'vue';
import { formatBigNumber, formatTimestamp } from "@/comm/format";
import { ref, computed, watch } from "vue";
import Copy from "@/components/copy/index.vue";
import JNumber from "@/components/j-number/index.vue";
const color = ref<"win" | "lose">("lose");
const dom = ref();
const PesonURL = '/address/';
const BrowserURL = '/entity/';
const props = defineProps({
	pot: Object,
	item: Object,
	page: {
		type: String,
		default: "index"
	}
});
const emit = defineEmits(["hide"]);

const style = computed(() => {
	if (!props.pot || !dom.value) return {};
	console.log("jsz style");
	return {
		left: props.pot.x - dom.value.clientWidth / 2 + "px",
		top: props.pot.y - dom.value.clientHeight - 30 + "px"
		// borderColor: `var(--${color})`
	};
});

watch(() => props.item, (newVal, oldVal) => {
	console.log('')
	if (newVal) {
		console.log('BS参数', newVal)
	}
}, { immediate: true })
const findKey = (targetValue: any, item: any) => {
	let key = ''
	for (let i in item) {
		if (targetValue == item[i]) {
			key = i
		}
	}
	return key
}
const indexTransfer = (item: any) => {
	if (item.address) { return item.address }
	else if (item.toAddressType == 'eoa' && item.toAddress) { return item.toAddress }
	else if (item.fromAddressType == 'eoa' && item.fromAddress) { return item.fromAddress }
	else if (item.toTag) { return item.toTag }
	else return item.fromTag
}
// 首页地址跳转
const indexGetTo = (str: any, item: any) => {
	const key = findKey(str, item)
	console.log('触发首页跳转', key, str)
	if (!key) return
	//无法跳转的key 
	if (key == 'fromTag' || key == 'toTag') return
	if (key == 'address') {
		if (item.fromAddressType == 'eoa' || item.toAddressType == 'eoa') {
			window.open(`${PesonURL}${str}`)
		}
	}
	if (key == 'toAddress') {
		if (item.toAddressType == 'eoa') {
			window.open(`${PesonURL}${str}`)
		}
	}
	if (key == 'toEntityId') {
		if (item.tofromAddressType == 'fund' || item.tofromAddressType == 'cex') {
			window.open(`${BrowserURL}${str}`)
		}
	}
}
//机构实体类地址跳转
const browserGetTo = (str: any, item: any) => {
	// console.log('触发机构跳转', key, str, item.origin)
	if (item.relationType == 'eoa' && item.relationAddress) {
		window.open(`${PesonURL}${item.relationAddress}`)
	} else if (item.relationId) {
		if (item.relationType == 'fund' || item.relationType == 'cex') {
			window.open(`${BrowserURL}${item.relationId}`)
		}
	} else if (item.address) {
		if (item.addressType == 'eoa') {
			window.open(`${PesonURL}${item.address}`)
		} else {
			if (item.addressType == 'fund' || item.addressType == 'cex') {
				window.open(`${BrowserURL}${item.address}`)
			}
		}
	} else return
}
//token币种详情跳转
const tokenGetTo = (str: any, item: any) => {
	const key = findKey(str, item)
	console.log('触发token跳转', key, str, item.origin)
	if (key == 'fromAddress') {
		if (item.fromAddress == 'eoa') {
			window.open(`${PesonURL}${item.fromAddress}`)
		} else if (!item.fromAddressType && !item.toAddressType && !item.relationType) {
			window.open(`${PesonURL}${item.fromAddress}`)
		} else return
	}
	if (key == 'toAddress') {
		if (item.toAddress == 'eoa') {
			window.open(`${PesonURL}${item.toAddress}`)
		} else if (!item.fromAddressType && !item.toAddressType && !item.relationType) {
			window.open(`${PesonURL}${item.toAddress}`)
		} else return
	}
}
const personGetTo = (str: any, item: any) => {
	const key = findKey(str, item)
	if (key == 'fromTag' || key == 'toTag') return
	else if (item.fromAddressType == 'eoa') {
		window.open(`${PesonURL}${item.fromAddress}`)
	} else if (!item.fromAddressType && !item.toAddressType && !item.relationType) {
		window.open(`${PesonURL}${item.fromAddress}`)
	} else if (item.addressType == 'fund' || item.addressType == 'cex') {
		window.open(`${BrowserURL}${item.fromAddress}`)
	} else return
}
const getAction = (val: any) => {
	let title, act, up;
	// console.log('============>类型', val)
	if (val.type == "transfer") {
		if (val.action == "withdraw") {
			//提现
			title = "withdraw";
			act = "out";
			up = true;
		} else {
			//充值
			title = "deposit";
			act = "out";
			up = false;
		}
	}
	if (val.method == "transfer") {
		//提现
		if (val.action == "withdraw") {
			title = "withdraw";
			act = "out";
			up = true;
		}
		//充值
		if (val.action == "deposit") {
			title = "deposit";
			act = "out";
			up = false;
		}
		if (val.action == "transfer") {
			//转账
			title = "transfer";
			act = "out";
			up = false;
		}
	} else {
		if (val.action == "buy") {
			//买
			title = "buy";
			act = "in";
			up = true;
		} else {
			//卖
			title = "sell";
			act = "out";
			up = false;
		}
	}
	return title;
};

const onHide = () => {
	emit("hide");
};
</script>
<template>
	<div class="table c-title-5 d-flex flex-column tb-bs" :class="item.action" :style="style" ref="dom" v-if="item">
		<div class="close-box">
			<!-- <img class="close-btn" src="@/assets/close.png" @click="onHide" /> -->
			<span class="iconfont icon-31guanbi close-btn" @click="onHide"></span>
		</div>
		<div class="d-flex justify-space-between">
			<div class="act-t">{{ item.action }}</div>
			<div class="bs-txt">{{ formatTimestamp(item.timestamp) }}</div>
		</div>
		<!-- 首页 -->
		<div v-if="page == 'index'">
			<div class="mt-2">
				<!-- <Copy :text="item.address || item.fromTag || item.relationAddress" :num="8"></Copy> -->
				<Copy @change="(e) => indexGetTo(e, item)" :text="indexTransfer(item)" :num="3"
					v-if="item.action == 'transfer'"></Copy>
				<!-- 提现都显示to -->
				<Copy @change="(e) => indexGetTo(e, item)" :text="item.toAddress || item.toEntityId || item.toTag" :num="3"
					v-else-if="item.action == 'withdraw'"></Copy>
				<Copy @change="(e) => indexGetTo(e, item)" :text="item.address || item.fromTag" :num="3"
					v-else-if="item.action == 'deposit'"></Copy>
				<Copy @change="(e) => indexGetTo(e, item)" :text="item.address || item.fromTag" :num="3" v-else></Copy>
			</div>
		</div>
		<!-- 机构 -->
		<div v-if="page == 'browser'">
			<div class="mt-2">
				<!-- 转账 -->
				<Copy @change="(e) => browserGetTo(e, item)" :text="item.relationAddress || item.address" :num="3"
					v-if="item.action == 'transfer'"></Copy>
				<!-- 收到/发送 -->
				<Copy @change="(e) => browserGetTo(e, item)" :text="item.relationAddress" :num="3"
					v-else-if="item.action == 'receive' || item.action == 'send'"> </Copy>
				<!-- 提现  -->
				<Copy @change="(e) => browserGetTo(e, item)" :text="item.relationAddress" :num="3"
					v-else-if="item.action == 'withdraw'"></Copy>
				<!-- 充值 -->
				<Copy @change="(e) => browserGetTo(e, item)" :text="item.relationAddress" :num="3"
					v-else-if="item.action == 'deposit'"> </Copy>
				<!-- 其他 -->
				<Copy @change="(e) => browserGetTo(e, item)" :text="item.address || item.fromTag || item.toTag" :num="3"
					v-else> </Copy>
			</div>
		</div>
		<!-- token -->
		<div v-if="page == 'token'">
			<div class="mt-2">
				<!-- 转账 -->
				<Copy @change="(e) => tokenGetTo(e, item)" :text="item.fromAddress" :num="3"
					v-if="item.action == 'transfer'"></Copy>
				<!-- 提现 -->
				<Copy @change="(e) => tokenGetTo(e, item)" :text="item.toAddress || item.toTag" :num="3"
					v-else-if="item.action == 'withdraw'"></Copy>
				<!-- 充值 -->
				<Copy @change="(e) => tokenGetTo(e, item)" :text="item.fromAddress || item.fromTag" :num="3"
					v-else-if="item.action == 'deposit'"> </Copy>
				<!-- 其他 -->
				<Copy @change="(e) => tokenGetTo(e, item)" :text="item.toAddress || item.toTag" :num="3" v-else> </Copy>
			</div>
		</div>
		<!-- 个人 -->
		<div v-if="page == 'person'">
			<div class="mt-2">
				<!-- 个人数据to都是向本人地址 所有均显示from  -->
				<Copy @change="(e) => personGetTo(e, item)" :text="item.fromAddress || item.fromTag" :num="3">
				</Copy>
			</div>
		</div>
		<div class="mt-1">
			<JNumber :num="+`${item.action == 'withdraw' ? Math.abs(item.outAmount) : item.outAmount}`" :is-color="true">
			</JNumber>
			<!-- {{ formatBigNumber(item.outAmount) }} -->
			<span class="syb">({{ item.outSymbol }})</span>
		</div>
		<div class="mt-1">
			<!-- ${{ item.outusdt || item.usd }} -->
			<JNumber :num="item.outusdt || item.usd"></JNumber>
		</div>
	</div>
</template>
<style lang="less" scoped>
.table {
	min-width: 200px;
	// height: 110px;
	border-radius: 4px;
	background-color: #21252b;
	// position: fixed;
	// left: 20%;
	// border-left: 5px solid var(--win);
	padding: 10px 12px;
	overflow: hidden;
	box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.5);
}

.tb-bs {
	position: absolute;
	z-index: 3;
	left: 0;
	top: 0;
	border-left: solid 3px #fff;
}

.bs-txt {
	white-space: nowrap;
	margin-left: 20px;
}

.close-box {
	display: flex;
	justify-content: flex-end;
	padding-bottom: 12px;

	.close-btn {
		width: 12px;
		height: 12px;
		object-fit: contain;
		font-size: 12px;
		color: #63676f;
	}
}

:deep(.copy-txt) {
	max-width: 180px;
}

.act-t {
	text-transform: capitalize;
}

.deposit,
.buy {
	border-color: #f6475d;

	.act-t {
		color: #f6475d;
	}
}

.withdraw,
.sell {
	border-color: #0dcb81;

	.act-t {
		color: #0dcb81;
	}
}

.transfer {
	border-color: #ab47bd;

	.act-t {
		color: #ab47bd;
	}
}

.syb {
	color: #b1b6c6;
}
</style>
